<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>手机端底部导航栏</title>
<link rel = "stylesheet" href = "../css/index.css"/>
<script src="../resources/scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="page-container">
        <div class="top-bar">
                <a href="#" >
                    <span>
                        <img class="avatar" src="../resources/images/avatar.svg" alt="">
                    </span>
                </a>
                <a href="#" >
                    <span>
                        <img class="btn-search" src="../resources/images/search.svg" alt="">
                    </span>
                </a>
        </div>
        <div class="list-tabs">
            <span class="list-item ">本校</span>
            <span class="list-item active">推荐</span>
            <span class="list-item">分类</span>
        </div>
        
        <div class="main">
            <div id ="blog-1" class="blog-item">
                <div class="title"><span>如何充实的度过大学生活？</span> <span class="btn-more"><img src="../resources/./images/btn-more.svg" alt="" srcset=""></span></div>
                <div class="author">
                    <span class="author-avatar"><img src="../resources/./images/user1.svg"/></span>
                    <span class="author-name">六六大帅哥</span>
                </div>
                <div class="desc">
                    <div class="desc-content">首先我们都知道，大学相对于高中来说，要宽松很多。而且，进入大学后，也不仅仅只有...</div>
                    <div class="desc-img"><span><img src="../resources/./images/blog1-img1.svg" alt=""></span></div>
                </div>
                <div class="operation">
                    <span class="btn-like"><img src="../resources/./images/like.svg" alt="">999</span>
                    <span class="btn-star"><img src="../resources/./images/star.svg" alt="">888</span>
                    <span class="btn-comment"><img src="../resources/./images/comment.svg" alt="">666</span>
                </div>
            </div>

            <div id ="blog-2" class = "blog-item">
                <div class="title"><span>中国高校宿舍8大配置排名</span> <span class="btn-more"><img src="../resources/./images/btn-more.svg" alt="" srcset=""></span></div>
                <div class="author">
                    <span class="author-avatar"><img src="../resources/./images/user2.svg"/></span>
                    <span class="author-name">徐彦祖</span>
                </div>
                <div class="desc">
                    <div class="desc-content">首先我们都知道，大学相对于高中来说，要宽松很多。而且，进入大学后，也不仅仅只有...</div>
                    <div class="desc-img"><span><img src="../resources/./images/blog2-img1.svg" alt=""></span></div>
                </div>
                <div class="operation">
                    <span class="btn-like"><img src="../resources/./images/like.svg" alt="">999</span>
                    <span class="btn-star"><img src="../resources/./images/star.svg" alt="">888</span>
                    <span class="btn-comment"><img src="../resources/./images/comment.svg" alt="">666</span>
               
                </div>
            </div>

            <div id ="blog-3" class = "blog-item">
                <div class="title"><span>大学牲真的好累啊...</span> <span class="btn-more"><img src="../resources/./images/btn-more.svg" alt="" srcset=""></span></div>
                <div class="author">
                    <span class="author-avatar"><img src="../resources/./images/user2.svg"/></span>
                    <span class="author-name">徐彦祖</span>
                </div>
                <div class="desc">
                    <div class="desc-content">首先我们都知道，大学相对于高中来说，要宽松很多。而且，进入大学后，也不仅仅只有...</div>
                    <!-- <div class="desc-img"><span><img src="../resources/./images/blog2-img1.svg" alt=""></span></div> -->
                </div>
                <div class="operation">
                    <span class="btn-like"><img src="../resources/./images/like.svg" alt="">999</span>
                    <span class="btn-star"><img src="../resources/./images/star.svg" alt="">888</span>
                    <span class="btn-comment"><img src="../resources/./images/comment.svg" alt="">666</span>
                </div>  
            </div>

            <div id ="blog-4" class = "blog-item" >
                <div class="title"><span>大学牲真的好累啊...</span> <span class="btn-more"><img src="../resources/./images/btn-more.svg" alt="" srcset=""></span></div>
                <div class="author">
                    <span class="author-avatar"><img src="../resources/./images/user2.svg"/></span>
                    <span class="author-name">徐彦祖</span>
                </div>
                <div class="desc">
                    <div class="desc-content">首先我们都知道，大学相对于高中来说，要宽松很多。而且，进入大学后，也不仅仅只有...</div>
                    <!-- <div class="desc-img"><span><img src="../resources/./images/blog2-img1.svg" alt=""></span></div> -->
                </div>
                <div class="operation">
                    <span class="btn-like"><img src="../resources/./images/like.svg" alt="">999</span>
                    <span class="btn-star"><img src="../resources/./images/star.svg" alt="">888</span>
                    <span class="btn-comment"><img src="../resources/./images/comment.svg" alt="">666</span>
                </div>  
            </div>

        </div>
        <div class="bottom-nav" >
            <img id="tabs-bg"  src="../resources/images/tabs-bg.svg"/>
            <a href="http://127.0.0.1:5500/html/index.html" class="nav-item">
                <span class="icon">
                    <img id="tab-home" src="../resources/images/tab-home.svg"/>
                </span>
            </a>
            <a href="http://127.0.0.1:5500/html/blogTest.html">
                <span class="icon">
                    <img id="tab-message"  src="../resources/images/tab-message.svg"/>
                </span>
            </a>
            <a href="http://127.0.0.1:5500/html/zjh/blogEdit.html">
                <span class="icon">
                    <img id="tab-publish"  src="../resources/images/tab-publish.svg"/>
                </span>
            </a>
            <a href="http://127.0.0.1:5500/html/blogCheck.html ">
                <span class="icon">
                    <img id="tab-search"  src="../resources/images/tab-search.svg"/>
                </span>
            </a>
            <a href="http://127.0.0.1:5500/personalPage/index.html">
                <span class="icon">
                    <img id="tab-user" src="../resources/images/tab-user.svg"/>
                </span>
            </a>
        </div>
    </div>
    
</body>
<script type = "text/javascript" src = "../js/index.js"></script>

</html>



